<template>
    <div class="main" style="padding-top:20px">
        <div class="main-header" v-if="buttons.length">
            <el-button v-for="(item, index) in buttons" :key="index" :type="item.path | formatType" :icon="item.icon"
                :disabled="item.path | formatDisabled(selection)" @click="tapButton(item)">{{ item.title }}</el-button>
        </div>
        <el-table ref="table" class="main-table" :data="adminLogData" height="100%" border
            header-cell-class-name="main-table-header" @selection-change="onSelectionChange" @row-click="onRowClick">
            <el-table-column type="selection" width="40"> </el-table-column>
            <el-table-column align="center" label="操作人" prop="username" />
            <el-table-column align="center" label="IP地址" prop="ip" />
            <el-table-column align="center" label="操作名称" prop="title" />
            <el-table-column align="center" label="操作地址" prop="url" />
            <el-table-column align="center" label="创建时间" prop="createtime">
                <template slot-scope="{ row }">
                    {{ row.createtime | formatDate }}
                </template>
            </el-table-column>
        </el-table>
        <el-pagination class="main-pagination" :current-page.sync="page" :page-size="limit" :total="total"
            @current-change="onCurrentChange" layout="total,jumper,prev,pager,next"></el-pagination>
        <el-dialog :visible.sync="dialogVisible" title="日志详情" append-to-body width="800px" @close="onDialogClose">
            <component :is="dialogView" :selection="selection"></component>
        </el-dialog>
    </div>
</template>

<script>
import { get } from "@/assets/js/http.js";
export default {
    name: "view-admin-log",
    data() {
        return {
            adminLogData: [],
            selection: [],
            page: 1,
            limit: 20,
            total: 0,
            dialogVisible: false,
            dialogView: ""
        };
    },
    computed: {
        buttons() {
            return this.$store.state.buttons;
        }
    },
    mounted() {
        this.getAdminLogData();
    },
    components: {
        Detail: () => import("./detail.vue")
    },
    methods: {
        async getAdminLogData() {
            const data = await get({
                url: "/admin/auth.adminLog/index",
                loading: true,
                params: {
                    page: this.page,
                    limit: this.limit
                }
            });
            this.adminLogData = data.list;
            this.total = data.total;
        },
        onCurrentChange(index) {
            this.page = index;
            this.getAdminLogData();
        },
        onSelectionChange(selection) {
            this.selection = selection;
        },
        onRowClick(row) {
            this.$refs.table.toggleRowSelection(row);
        },
        onCheck() {
            this.dialogView = "Detail";
            this.dialogVisible = true;
        },
        onDialogClose() {
            this.$refs.table.clearSelection();
        },
        tapButton(item) {
            if (item.path === "check") {
                this.onCheck();
            }
        }
    }
};
</script>
